/**
 * 
  {
    id:"section01BottomChart",
    config:{
      title:"24小时口岸通关实时人流量（人次）",
      yAxisType:"simple", //simple,double
      xAxisData:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
      data:[{
        type:"line",
        area:true,
        areaColor:gradientColorGreenTop,
        name:"出口",
        data:[100,110,78,97,298,356,121,50,99,199,356,121]
      },{
        type:"line",
        area:true,
        areaColor:gradientColorBlueTop,
        name:"进口",
        data:[200,210,178,197,398,456,221,150,199,299,456,221]
      }]
    },
    option:{
      color:["#00D372","#00BBFF"],
      grid:{
        top: "26%"
      }
    }
  }
 */
import * as echarts from 'echarts'
import _ from 'lodash'
import {
  getxAxisConfig,
  getyAxisConfig,
  getSeriesConfig
} from './utils'
import mapJsonChina from '../../../static/map/china.json'

export function createGradientColor(direction,colors){
  const directionMap = {
    toTop:[0,1,0,0],
    toRight:[0,0,1,0],
    toBottom:[0,0,0,1],
    toLeft:[1,0,0,0]
  }
  let currentDirection = directionMap[direction]
  let colorSteps = []
  if(colors && colors.length){
    colors.forEach((item,index) => {
      colorSteps.push({
        offset: index===colors.length-1?1:(1/colors.length*index).toFixed(2),
        color: item,
      })
    });
  }else{
    colorSteps = [
      {
        offset: 0,
        color: '#ff0000',
      },
      {
        offset: 1,
        color: '#00ff00',
      },
    ]
  }
  return new echarts.graphic.LinearGradient(
    currentDirection[0],
    currentDirection[1],
    currentDirection[2],
    currentDirection[3], 
    colorSteps
  )
}

export function getChartInstanceById(id){
  let instance = null
  instance = echarts.getInstanceById(id)
  if(!instance){
    const dom = document.getElementById(id)
    instance = echarts.init(dom)
  }
  window.addEventListener("resize",()=>{
    instance.resize()
  })
  return instance
}

export function initChart(initialOption,params){
  const { id,option } = params
  const instance = getChartInstanceById(id)
  const finalOption = _.merge(initialOption,option)
  // console.log(finalOption)
  instance.setOption(finalOption)
  return instance
}

export function createLineBarChart(params){
  const { config } = params
  const xAxisCopy = getxAxisConfig(config)
  const yAxisCopy = getyAxisConfig(config)
  const seriesCopy = getSeriesConfig(config)

  const initialOption = {
    title:{
      show: config.title?true:false,
      text: config.title,
      left: "left",
      top: 0,
      textStyle:{
        color: "#fff",
        fontSize: "0.06rem"
      }
    },
    legend:{
      left: "right",
      top: 0,
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 5,
      textStyle:{
        color: "#fff",
        fontSize: "0.06rem"
      }
    },
    grid: {
      left: '0',
      right: '0',
      bottom: '0',
      top: '20%',
      containLabel: true
    },
    tooltip: {
      show: false
    },
    xAxis: xAxisCopy,
    yAxis: yAxisCopy,
    series: seriesCopy
  }
  return initChart(initialOption,params)
}

export function createPieChart(params){
  const { config } = params
  const initialOption = {
    tooltip: {
      show: false
    },
    series: {
      name: '',
      type: 'pie',
      radius: ['160%', '200%'],
      center: ['50%', '50%'],
      top:"center",
      label:{
        show: false
      },
      tooltip:{
        show: false
      },
      itemStyle: {
        normal:{
          borderRadius: 4,
          borderWidth: 2,
          borderColor: "#020B2E",
        }
      },
      data: config.data
    }
  }
  return initChart(initialOption,params)
}

export function createEndPointPieChart(params){
  const { config } = params
  const { value,colorType } = config
  const colorMap={
    blue:{
      color:createGradientColor("toBottom",["#0006FF","#356EFF"]),
      point:"rgba(157, 174, 255, 1)",
      pointBorder:"rgba(157, 174, 255, .4)"
    },
    purple:{
      color:createGradientColor("toBottom",["#7917FF","#B158FD"]),
      point:"rgba(187, 137, 255, 1)",
      pointBorder:"rgba(187, 137, 255, .4)"
    }
  }
  const curColor = colorMap[colorType]
  const initialOption = {
    angleAxis: {
      show: false,
      type: 'value',
      startAngle: 90, //极坐标初始角度
      splitLine: {
          show: false,
      },
    },
    barMaxWidth: 4, //圆环宽度
    radiusAxis: {
        show: false,
        type: 'category',
    },
    //圆环位置和大小
    polar: {
      center: ['50%', '50%'],
      radius: '170%',
    },
    series: [
      {
        type: 'bar',
        stack: '测试',
        data: [
          {
            //上层圆环，显示数据
            value: value,
            name: '',
            itemStyle: {
              color: curColor.color,
            },
          },
        ],
        coordinateSystem: 'polar',
        roundCap: true, //顶端圆角从 v4.5.0 开始支持
        z: 2,
      },
      {
        //下层圆环，显示最大值
        type: 'bar',
        barWidth:2,
        data: [
          {
            value: 1,
            itemStyle: {
              color: 'rgba(41, 182, 251, .3)'
            },
          },
        ],
        barGap: '-70%',
        coordinateSystem: 'polar',
        roundCap: true,
        z: 1,
      },
      // 带空心的小圆点
      {
        type: 'pie',
        radius: ['82%', '83%'],
        zlevel: 10,
        silent: true,
        startAngle: 90,
        data: [
          {
            name: '',
            value: value,
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            itemStyle: {
              color: 'rgba(0,0,0,0)',
            },
          },
          // 画中间的图标
          {
            name: '',
            value: 0,
            label: {
              position: 'inside',
              backgroundColor: curColor.point,
              borderRadius: 20,
              padding: 4, // 可以控制圆的大小
              borderWidth: 4,
              borderColor: curColor.pointBorder,
            },
          },
          {
            name: '',
            value: 1-value,
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            itemStyle: {
              color: 'rgba(255,255,255,0)',
            },
          },
        ],
      },
    ],
  };
  return initChart(initialOption,params)
}

export function createMapChart(params){
  const { config } = params
  const { name,itemColor } = config
  echarts.registerMap(name, mapJsonChina);
  const initialOption = {
    geo: {
      map: name,
      show: true,
      roam: false,
    },
    series:[{
      type: "map",
      map: name,
      aspectScale: 0.75,
      clickable: false,
      itemStyle: {
        normal: {
            label: {
              show: true,
              color: '#fff',
            },
            borderWidth: 1,
            borderColor: 'rgba(51, 72, 231, 1)',
            textStyle: {
              color: '#fff',
              fontSize: "0.07rem",
              backgroundColor: 'transparent',
            },
            areaColor: itemColor,
        },
        emphasis: {
          label: {
            show: true,
            color: '#fff',
          },
          borderWidth: 1,
          borderColor: 'rgba(51, 72, 231, 1)',
          textStyle: {
            color: '#fff',
            fontSize: "0.07rem",
            backgroundColor: 'transparent',
          },
          areaColor: itemColor,
        },
      },
      data: [],
    }]
  }
  return initChart(initialOption,params)
}